<template>
  <div>
    <van-nav-bar title="绑定支付宝">
      <img
        src="~assets/image/arrow_left.png"
        alt=""
        width="20"
        height="20"
        slot="left"
        @click="ivBack"
      />
    </van-nav-bar>
    <div class="xian"></div>
    <van-cell-group>
      <van-field v-model="phone" label="手机号" placeholder="请输入用户名" />
    </van-cell-group>
    <van-field
      v-model="sms"
      center
      clearable
      label="验证码"
      placeholder="请输入验证码"
    >
      <div slot="button" @click="timeClick">
        <van-button size="small" type="primary">{{ timeText }}</van-button>
      </div>
    </van-field>
    <p>为确保提现到账,手机号须为您开通的支付宝账号</p>
    <van-button
      :disabled="isdiss"
      :class="isdiss ? '' : 'isbtnbg'"
      class="btn"
      @click="nextClick"
      >确认绑定</van-button
    >
  </div>
</template>
<script>
import { getApiSms, executeAddZFB } from "network/ApiServe";
export default {
  data() {
    return {
      phone: "",
      sms: "",
      timeSS: 61,
      timeText: "发送验证码",
      isdis: true,
    };
  },
  created() {
    this.idcard = localStorage.getItem("idcard");
    this.realname = localStorage.getItem("realname");
    this.loginPhone = localStorage.getItem("phone");
  },
  computed: {
    isdiss() {
      if (this.phone.length == 11 && this.sms.length >= 6) {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    ivBack() {
      this.$router.back(-1);
    },
    timeClick() {
      if (this.phone.length != 11) {
        this.$toast("请输入手机号或者手机号格式不正确");
        return;
      }
      const timrClear = setInterval(() => {
        this.timeSS--;
        if (this.timeSS === 0) {
          clearInterval(timrClear);
          this.timeSS = 61;
          this.timeText = "发送验证码";
        }
        this.timeText = "剩余" + this.timeSS + "s";
      }, 1000);
      getApiSms(this.phone)
        .then((res) => {
          if (res.resp_code === "000000") {
            this.$toast(res.resp_message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    nextClick() {
      executeAddZFB(this.realname, this.phone, this.idcard, this.loginPhone)
        .then((res) => {
          if (res.resp_code === "000000") {
            this.$router.back(-1);
            console.log(res.resp_message);
          } else {
            console.log(res.resp_message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style>
.van-cell__title {
  width: 60px;
}
</style>
<style scoped>
.xian {
  height: 15px;
  background-color: #efefef;
}
p {
  text-indent: 2em;
  font-size: 13px;
  margin-top: 20px;
  color: #999;
}
.btn {
  background-color: #999;
  color: #fff;
  width: 335px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  margin: 20px auto;
}
.isbtnbg {
  background-color: #07c160;
}
</style>